<template>
    <div class="search">
      <div class="search-top">
        <div class="top">
          <img class="back" src="./icons/back.png" alt="" @click="back">
          <span>搜索商品</span>
          <div class="top-click">
            <img src="./icons/more.png" alt="">
          </div>
        </div>
      </div>
      <div class="search-sole">
        <div class="header">
          <input type="text" placeholder="大家都在搜 空气清新剂" ref="sear">
          <span>取消</span>
        </div>
        <div class="sole">
          <div class="newly">
            <div class="newly-top">
              <span>最近搜索</span>
              <span class="newly-remove">清除</span>
            </div>
          </div>
          <div class="hot">
            <div class="newly-top">
              <span>热门搜索</span>
              <span class="newly-remove">换一批</span>
            </div>
            <div class="newly-sole">
              <span v-for="(val, key) in hot" :key="key">{{val}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="before-sole" v-show="show">
        <div class="header">
          <input type="text" placeholder="大家都在搜 空气清新剂" ref="sear">
          <span @click="Click">搜索</span>
        </div>
        <div class="sole">
          <div class="before" v-for="(val, key) in font" :key="key">
            <span><span class="before-left">{{val.title}}</span></span>
            <div class="before-right">
              <span>{{val.phones}}</span>
              <span>{{val.phone}}</span>
              <span>{{val.hone}}</span>
              <img :src="val.img" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      hot: ['休闲裤男', '洗衣液', '宽腿裤', '卫衣男', '丝袜', '男鞋', '四件套', '连衣裙', '裤子', '针织衫', '裤子女', '卫衣女', '棉服男', '高压锅', '早教启智'],
      show: true,
      font: [
        {title: '华为', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')},
        {title: '华为手机', phones: 'p30', phone: 'p30pro', hone: 'mate20', img: require('./icons/link.png')}
      ]
    }
  },
  methods: {
    back () {
      this.$router.push({path: '/home'})
    },
    Click () {
      this.$router.push({path: '/result'})
    }
  }
}
</script>

<style scoped lang="scss">
.search{
  width: 100vw;
  height: 100vh;
  .search-top{
    height: 180px;
    background: #fff;
    padding: 0 50px;
    box-sizing: border-box;
    .top{
      padding-top: 100px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .back{
        width: 45px;
        height: 45px;
        margin-top: 5px;
      }
      span{
        font-size: 45px;
      }
      .top-click{
        margin-top: -30px;
        img{
          width: 50px;
          height: 10px;
        }
      }
    }
  }
  .search-sole{
    .header{
      height: 200px;
      display: flex;
      align-items: center;
      border: none;
      background: #fff;
      padding-left: 30px;
      input{
        height: 80px;
        font-size: 40px;
        width: 975px;
        background: url("./icons/search.png") no-repeat 25px, url("./icons/hotSearch.png") no-repeat 100px;
        background-size: 50px 50px;
        border-radius: 40px;
        border: solid 1px #dcdcdc;
        margin-top: 65px;
        text-indent: 200px;
      }
      span{
        width: 150px;
        height: 80px;
        line-height: 80px;
        font-size: 40px;
        background: #ff5a37;
        color: #fff;
        text-align: center;
        margin: 68px 0 0 50px;
        border-radius: 15px;
      }
    }
    .sole{
      height: 90vh;
      background: url("./icons/1c5ba523b685c564.png");
      background-size: 100% 100%;
      padding-left: 50px;
      .newly,.hot{
        .newly-top{
          line-height: 100px;
          font-size: 32px;
          display: flex;
          justify-content: space-between;
          .newly-remove{
            margin-right: 60px;
            color: #4d83f7;
          }
        }
      }
      .newly{
        height: 240px;
      }
      .hot{
        height: 480px;
        .newly-sole{
          height: 360px;
          margin-top: 40px;
          span{
            background: #efefef;
            font-size: 36px;
            margin: 0 40px 20px 0;
            padding: 25px 20px 28px 14px;
            display: inline-block;
          }
        }
      }
    }
  }
  .before-sole{
    width: 100vw;
    height: 92.5vh;
    position: absolute;
    top: 160px;
    background: #fff;
    .header{
      display: flex;
      align-items: center;
      border: none;
      background: #fff;
      padding-left: 30px;
      input{
        height: 80px;
        font-size: 40px;
        width: 975px;
        background: url("./icons/search.png") no-repeat 25px, url("./icons/hotSearch.png") no-repeat 100px;
        background-size: 50px 50px;
        border-radius: 40px;
        border: solid 1px #dcdcdc;
        margin-top: 65px;
        text-indent: 200px;
      }
      span{
        width: 150px;
        height: 80px;
        line-height: 80px;
        font-size: 40px;
        background: #ff5a37;
        color: #fff;
        text-align: center;
        margin: 68px 0 0 50px;
        border-radius: 15px;
      }
    }
    .sole{
      margin-top: 40px;
      .before{
        height: 120px;
        line-height: 120px;
        margin-left: 50px;
        border-bottom: dashed 1px #dcdcdc;
        font-size: 40px;
        display: flex;
        justify-content: space-between;
        .before-left{
          color: #d74a45;
        }
        .before-right{
          margin-right: 20px;
          span{
            padding: 15px 30px;
            margin-right: 20px;
            background: #f2f2f7;
          }
          img{
            width: 45px;
            height: 45px;
          }
        }
      }
    }
  }
}
</style>
